class Drag{
    constructor(domObj){
        this.domobj=domObj;
        this.cw=document.documentElement.clientWidth;
        this.ch=document.documentElement.clientHeight;
        this.ow=this.domobj.offsetWidth;
        this.oh=this.domobj.offsetHeight;
        this.ox=0;
        this.oy=0;
        this.cx=0;
        this.cy=0;
        this.left=0;
        this.top=0;
    }
    drag(){
        this.down();
    }
    down(){
        this.domobj.onmousedown=(e)=>{
            this.domobj.style.cursor='default';
            this.ox=e.offsetX;
            this.oy=e.offsetY;
            this.move();
            this.up();
        }
    }
    move(){
        document.onmousemove=(e)=>{
            this.cx=e.clientX;
            this.cy=e.clientY;
            this.left=this.cx-this.ox;
            this.top=this.cy-this.oy;
            if(this.left<=0){
                this.left=0;
            }
            if(this.top<=0){
                this.top=0;
            }
            if(this.left>=this.cw-this.ow){
                this.left=this.cw-this.ow;
            }
            if(this.top>=this.ch-this.oh){
                this.top=this.ch-this.oh;
            }
            this.domobj.style.left=this.left+'px';
            this.domobj.style.top=this.top+'px';
        }
    }
    up(){
        document.onmouseup=function () {
            document.onmousemove=null;
            document.onmouseup=null;
        }
    }
}